@use "sass:color"
@use "../../shared/settings/colors"
@use "../../shared/settings/fonts"

section#torch-nav
  background-color: colors.$alabaster-gray

  .torch-container
    display: flex

  .torch-logo
    padding: 6px 0px

    a
      display: flex

      h3
        color: colors.$ir-red
        font-family: fonts.$helvetica-neue
        text-transform: uppercase
        font-size: 18px
        font-weight: bold
        margin: 15px 10px

      &:before
        content: " "
        display: block
        background-image: url("../images/torch-logo.png")
        width: 50px
        height: 50px
        background-size: contain
        background-repeat: no-repeat

  .torch-nav
    display: flex

    a
      display: block
      font-size: 16px
      padding: 22px 10px 19px 10px
      border-bottom: 3px solid transparent
      color: color.adjust(colors.$dark-gray, $lightness: 25%)

      &:hover
        color: colors.$dark-gray

      &.active
        border-color: colors.$ir_red
        color: colors.$dark-gray
